<template>
    <view
        class="ccii_choose_label"
        :class="type == 1 || type == 2 ? 'bg1' : type == 3 ? 'bg3' : 'bg4'"
    >
        <view class="top">
            <i></i>
            <span class="fs_32 c_333 fw_600" @click="$handleOpenUrl('/pages/home/index',0)">跳过</span>
        </view>
        <view v-if="type == 1" class="text text1"></view>
        <view v-if="type == 2" class="text text2"></view>
        <view v-if="type == 3" class="text text3"></view>
        <view v-if="type == 4" class="text text4"></view>
        <view v-if="type != 4" class="content">
            <view class="fw_600 c_333 h1">身份信息</view>
            <view class="ul">
                <view class="li"
                    :class="activeList.indexOf(item.id) != -1 ? 'active' : ''"
                    v-for="item in list"
                    :key="item.id"
                    @click="handleChoose(item.id)"
                >
                    {{ item.name }}
                </view>
            </view>
            <view class="fw_600 c_333 h1">主营业务</view>
            <view class="ul">
                <view class="li"
                    :class="activeList2.indexOf(item.id) != -1 ? 'active' : ''"
                    v-for="item in list2"
                    :key="item.id"
                    @click="handleChoose2(item.id)"
                >
                    {{ item.name }}
                </view>
            </view>
        </view>
        <view v-else class="content_box">
            <view class="fw_600 c_333 h1">备注您的身份</view>
            <input
                type="text"
                maxlength="20"
                placeholder="请输入20个字以内"
                v-model.trim="txt"
            />
        </view>
        <button class="btn fs_32" @click="handleSave()">
            保存
        </button>
    </view>
</template>

<script>
import {
    getQueryLabels,
    saveCustomerCustomerTag,
    savePersonalityTag,
    getTagByCustomer
} from "@/api/login/index";
export default {
    data() {
        return {
            title: "",
            list: [],
            activeList: [],
            list2: [],
            activeList2: [],
            txt: "",
            type: "", // 1买家  2卖家  3冻品服务  4其他
        };
    },
    onLoad(option) {
        this.type = option.id || 1;
        if (this.type != 4) {
            this.handleGetQueryLabels(1); //查询我的身份
            this.handleGetQueryLabels(2); //查询我想买
        }
        this.handleGetTagByCustomer()
    },
    methods: {
        handleChoose(id) {
            if (
                this.activeList.length >= 3 &&
                this.activeList.indexOf(id) == -1
            ) {
				uni.showToast({
					title: '身份标签最多选择3个',
					icon:"none"
				});
                return;
            }
            if (this.activeList.indexOf(id) > -1) {
                this.activeList.splice(this.activeList.indexOf(id), 1);
            } else {
                this.activeList.push(id);
            }
        },
        handleGetQueryLabels(stu) {
            getQueryLabels({parentId:this.type, type:stu}).then((res) => {
                if (res.code === 0) {
                    this.title = res.data[0].name;
                    this[stu == 1 ? "list" : "list2"] = res.data[0].chile;
                }
            });
        },
        handleGetTagByCustomer() {
			let info = JSON.parse(uni.getStorageSync("userInfo"))
              let customerId = info.customer
                    ? info.customer.id
                    : '';
            getTagByCustomer({customerId:customerId,type:this.type}).then(res=>{
                if(res.code===0) {
                    if(this.type!=4) {
                        this.activeList = []
                        res.data.idTag.map(item=>{
                            if (item.tagId!=1) {
                                this.activeList.push(item.tagId)
                            }
                        })
                        this.activeList2 = []
                        res.data.demandTag.map(item=>{
                           this.activeList2.push(item.tagId)
                        })
                    }else{
                        this.txt = res.data[0].name
                    }
                }
            })
        },
        handleChoose2(id) {
            if (
                this.activeList2.length >= 6 &&
                this.activeList2.indexOf(id) == -1
            ) {
				uni.showToast({
					title: "主营业务标签最多选择6个",
					icon:"none"
				});
                return;
            }
            if (this.activeList2.indexOf(id) > -1) {
                this.activeList2.splice(this.activeList2.indexOf(id), 1);
            } else {
                this.activeList2.push(id);
            }
        },
        handleSave() {
            if (this.type != 4) {
                // 买家 卖家 服务商
                if (!this.activeList.length || !this.activeList2.length) {
					uni.showToast({
						title: "请选择属于您的标签",
						icon:"none"
					});
                    return;
                }
				let info = JSON.parse(uni.getStorageSync("userInfo"))
                let customerId = info.customer
                    ? info.customer.id
                    : '';
                let arr = [...this.activeList, ...this.activeList2];
                arr = [...new Set(arr)].join(",");
                saveCustomerCustomerTag({
                    customerId: customerId,
                    tagIds: arr,
                }).then((res) => {
                    if (res.code === 0) {
						this.$handleOpenUrl("/pages/login/personalData?id="+this.type)
                    }
                });
            } else if (this.type == 4) {
                // 其他
                if (!this.txt) {
					uni.showToast({
						title: "请输入您的身份",
						icon:"none"
					});
                    return;
                }
				let info = JSON.parse(uni.getStorageSync("userInfo"))
                let customerId = info.customer
                    ? info.customer.id
                    : '';
                savePersonalityTag({
                    customerId: customerId,
                    names: this.txt,
                }).then((res) => {
                    if (res.code === 0) {
						this.$handleOpenUrl("/pages/login/personalData?id=4")
                    }
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.bg1 {
    background: url("https://oss-shop.cciinet.com/files/MiniProgram/maihuo_bg.png") no-repeat;
    background-size: contain;
}
.bg3 {
    background: url("https://oss-shop.cciinet.com/files/MiniProgram/dongpinfuw_bg.png") no-repeat;
    background-size: contain;
}
.bg4 {
    background: url("https://oss-shop.cciinet.com/files/MiniProgram/qita_bg.png") no-repeat;
    background-size: contain;
}
.ccii_choose_label {
    padding-bottom: 200upx;
    .top {
        height: 100upx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 50upx;
        .icon {
            display: inline-block;
            height: 42upx;
            width: 24upx;
            background: url("https://oss-shop.cciinet.com/files/MiniProgram/back_666.png") no-repeat center center;
            background-size: 100% 100%;
        }
    }
    .text {
        height: 120upx;
        width: 516upx;
        margin: 0 50upx 32upx;
    }
    .text1 {
        background: url("https://oss-shop.cciinet.com/files/MiniProgram/bg666.png") no-repeat;
        background-size: 100% 100%;
    }
    .text2 {
        background: url("https://oss-shop.cciinet.com/files/MiniProgram/maihuo1.png") no-repeat;
        background-size: 100% 100%;
    }
    .text3 {
        background: url("https://oss-shop.cciinet.com/files/MiniProgram/dongpinfuwu.png") no-repeat;
        background-size: 100% 100%;
    }
    .text4 {
        background: url("https://oss-shop.cciinet.com/files/MiniProgram/qita.png") no-repeat;
        background-size: 100% 100%;
    }
    .content {
        margin-top: 0upx;
        border-top: 2upx solid #929292;
        padding: 0 50upx 50upx;
        .h1 {
            font-size: 30upx;
            margin: 40upx 0;
        }
        .ul {
            display: flex;
            flex-wrap: wrap;
            .li {
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 12upx;
                // height: 60upx;
                font-size: 28upx;
                color: #4a4a4a;
                padding: 20upx 25upx;
                margin: 0 32upx 50upx 0;
                border: 3upx solid #8e8e8e;
            }
            .active {
                color: #fff;
                background: linear-gradient(#ff9109, #ff5804);
                border-color: #ff9109;
            }
        }
    }
    .content_box {
        margin: 0 auto;
        border-top: 2upx solid #929292;
        padding: 0 50upx;
        .h1 {
            font-size: 30upx;
            margin: 100upx 0 40upx;
        }
        input {
            height: 80upx;
            width: 650upx;
            font-size: 32upx;
            border-bottom: 2upx solid #d0d2d7;
            background-color: transparent;
        }
    }
    .btn {
        position: fixed;
        bottom: 60upx;
        left: calc(50% - 325upx);
        height: 90upx;
        width: 650upx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        background: linear-gradient(#ff9109, #ff5804);
        border-radius: 45upx;
    }
}
</style>